Typescript

타입스크립트에 대해서 알아봅시다.

---

💡Typescript?

타입스크립트는 자바스크립트의 타입 검사를 수행하기 위한 언어입니다.

기본 자바스크립트는 변수의 값이 어떤 타입인지 알지 못하는 문제가 있습니다.

1let iAmNumber = 1;
2
3iAmNumber = '사실 문자열임';
4
5// number만 사용할 수 있는 함수를 String에서 사용하여 에러 발생
6// TypeError: iAmNumber.toExponential is not a function
7iAmNumber.toExponential(2);

코드가 실행되기 전까지 해당 변수가 어떤 타입인지 모르기 때문에 어떤 프로퍼티나 함수를 가지는지 모릅니다.

따라서 코드 실행 시 발생할 수 있는 에러를 막기 위해서 타입스크립트를 사용합니다.

또한 자동완성을 지원하여 실수에 의한 오류를 방지합니다.

- 타입 선언

타입스크립트는 명시적으로 변수의 타입을 지정할 수 있습니다.

1let message : String;
2
3message = '12';
4
5// 에러 발생
6// 'boolean' 형식은 'String' 형식에 할당할 수 없습니다.
7message = true;

타입을 명시하여 다른 타입을 변수에 할당할 수 없게 할 수 있습니다.

- 타입 추론

타입스크립트는 변수의 타입을 명시하지 않아도 자동으로 해당 변수의 타입을 추론(inference) 할 수 있습니다.

1// 초기화 시 message를 String으로 추론
2let message = '12';
3
4// 에러 발생
5// 'boolean' 형식은 'String' 형식에 할당할 수 없습니다.
6message = true;

- 타입 검사

타입스크립트는 변수의 타입을 런타임 이전에 검사하여 버그를 알릴 수 있습니다.

1const message : String = '나는 글자야';
2
3// 에러 발생
4// This expression is not callable.
5// Type 'String' has no call signatures.
6message();

- 타입 단언 연산자 as, !

as를 사용하면 타입스크립트에게 해당 값이 어떤 타입인지를 구체적으로 명시할 수 있습니다.

1const myCanvas = document.getElementById("main_canvas") as HTMLCanvasElement;

어떤 타입이 null 이나 undefined를 가질 경우 타입 스크립트에서는 반드시 타입 검사를 시도해야합니다.

그러나 !를 사용하여 해당 값이 null 이나 undefined이 아님을 단언할 수 있습니다.

1function liveDangerously(x?: number | undefined) {
2	// 타입 검사를 하지 않음
3	console.log(x!.toFixed());
4
5	// 옵셔널 체이닝을 사용하여 타입 검사를 할 경우 
6	// console.log(x?.toFixed());
7}

---

💡 tsc

tsc는 타입스크립트를 위한 컴파일러입니다.

노드 패키지 매니저를 통해 설치할 수 있습니다.

1npm install -g typescript

타입스크립트는 .ts 확장자를 가지고 있습니다.

1// typescript
2function greet(person: string, date: Date) {
3  console.log(`Hello ${person}, today is ${date.toDateString()}!`);
4}

현재까지는 브라우저는 타입스크립트를 지원하지 않기 때문에 타입스크립트로 작성된 코드는 자바스크립트로 변환해서 사용해야 합니다.

tsc는 이러한 파일을 .js 자바스크립트 파일로 변환해 주는 역할을 합니다.

1tsc hello.ts

해당 명령어로 타입스크립트를 자바스크립트로 변환할 수 있습니다.

변환 도중 에러가 발생한다면 오류 메시지를 출력하여 해당 스크립트에 문제가 있음을 알립니다.

1// javascript
2"use strict";
3function greet(person, date) {
4    console.log("Hello ".concat(person, ", today is ").concat(date.toDateString(), "!"));
5}

- 엄격한 타입 검사

기본적으로 tsc는 에러가 있어도 자바스크립트로의 변환을 멈추지 않습니다.

더 강력하고 엄격한 타입 검사를 수행하기 위해서는 --noEmitOnError 컴파일 옵션을 사용해야 합니다.

1tsc --noEmitOnError hello.ts

해당 옵션을 사용하면 에러 발생 시 자바스크립트로의 변환을 중단합니다.

- 컴파일 옵션

그 외 컴파일 옵션은 다음과 같습니다.

TSConfig Reference

옵션	설명
--noEmitOnError	에러 발생 시 컴파일 중단
strictNullChecks	null, undefined를 다른 타입 값에 할당할 수 없음
strictFunctionTypes	엄격한 함수 매개변수 타입 검사
strictPropertyInitialization	클래스의 모든 프로퍼티가 생성자에서 초기화되도록 강제
noImplicitAny	any 타입으로 추론되는 변수 사용 불가
noImplicitThis	This는 any 타입이 될 수 없음
noImplicitReturns	함수의 모든 경로에서 명시적으로 값을 반환하도록 강제
noUnusedLocals	사용하지 않는 로컬 변수에 대한 경고 발생
noUnusedParameters	사용하지 않는 함수 매개변수에 대한 경고 발생
alwaysStrict	항상 자바스크립트 엄격 모드 적용
esModuleInterop	CommonJS 모듈을 ES 모듈처럼 사용하도록 허용
resolveJsonModule	JSON 파일을 모듈처럼 가져올 수 있게 허용
strict	strictNullChecks, strictFunctionTypes, strictPropertyInitialization, noImplicitAny, noImplicitThis, alwaysStrict 활성화

- tsconfig.json

tsconfig.json는 타입스크립트 설정을 정의하는 파일입니다.

컴파일러 옵션, 프로젝트 경로 등을 설정할 수 있습니다.

tsc --init 명령어를 통해 생성할 수 있습니다.

1{
2  "compilerOptions": {                      // 컴파일러 옵션
3    "target": "es6",                
4    "module": "commonjs",           
5    "strict": true,                   
6    "outDir": "./dist",              
7    "rootDir": "./src",                
8    "esModuleInterop": true       
9  },
10  "include": [ "src/**/*" ],                  // 포함할 파일 또는 디렉토리
11  "exclude": [ "node_modules", "**/*.spec.ts"  ] // 제외할 파일 또는 디렉토리
12}

tsc 명령어를 실행하면 프로젝트 내의 tsconfig.json를 읽어 컴파일을 시도합니다.

---

💡 마무리

타입스크립트와 tsc 컴파일러에 대해 알아보았습니다.